import Wrapper from "./style";
import {Button, Checkbox, Form, Input} from "antd";
import {useNavigate} from "react-router-dom";

const SMSLogin = () => {
    
    const navigate = useNavigate()

    const onFinish = (values: any) => {
        console.log('Received values of form: ', values);
    };

    const inputStyle = {
        height: '48px',
        paddingTop: '4px',
        paddingBottom: '4px',
        lineHeight: '36px'
    }

    const loginBtnStyle = {
        marginTop: '12px',
        width: '100%',
        height: '48px',
        paddingTop: '4px',
        paddingBottom: '4px',
        padding: '10px 20px',
        fontSize: '14px',
        borderRadius: '4px',
        color: '#fff',
        backgroundColor: '#4285f4',
        borderColor: '#4285f4',
    }

    const SMSBtnStyle = {
        marginLeft: '12px',
        width: '30%',
        height: '48px',
        paddingTop: '4px',
        paddingBottom: '4px',
        padding: '10px 20px',
        fontSize: '14px',
        borderRadius: '4px',
        color: '#fff',
        backgroundColor: '#4285f4',
        borderColor: '#4285f4',
    }

    return (
        <Wrapper>
            <Form
                name="normal_login"
                className="login-form"
                initialValues={{remember: true}}
                onFinish={onFinish}
            >
                <Form.Item
                    name="username"
                    rules={[{required: true, message: '请输入账号'}]}
                >
                    <Input placeholder="请输入手机号" style={inputStyle}/>
                </Form.Item>
                <Form.Item
                    name="code"
                    rules={[{required: true, message: '请输入验证码'}]}
                >
                    <div className='sms'>
                        <Input
                            placeholder="请输入验证码"
                            style={inputStyle}
                        />
                        <Button style={SMSBtnStyle} type="primary" htmlType="submit" className="login-form-button">
                            发送验证码
                        </Button>
                    </div>
                </Form.Item>
                <Form.Item>
                    <div className="bottom-btn">
                        <Form.Item name="remember" valuePropName="checked" noStyle>
                            <Checkbox>下次自动登录</Checkbox>
                        </Form.Item>
                        <a className="login-form-forgot" href="">
                            忘记密码?
                        </a>
                    </div>
                </Form.Item>

                <Form.Item>
                    <Button style={loginBtnStyle} type="primary" htmlType="submit" className="login-form-button">
                        登录
                    </Button>
                </Form.Item>
                <div className='bottom'>
                    <p>还没有账号?</p>
                    <a onClick={() => {
                        navigate('/register')
                    }}>去注册</a>
                </div>
            </Form>
        </Wrapper>
    )
}
export default SMSLogin;